<!DOCTYPE HTML>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Bootstrap-ecommerce by Vosidiy">

    <title>主页</title>

    <link rel="/shortcut icon" type="image/x-icon" href="/images/favicon.ico">

    <!-- jQuery -->
    <script src="/js/jquery-2.0.0.min.js" type="text/javascript"></script>

    <!-- Bootstrap4 files-->
    <script src="/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- Font awesome 5 -->
    <link href="/fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet">

    <!-- plugin: fancybox  -->
    <script src="/plugins/fancybox/fancybox.min.js" type="text/javascript"></script>
    <link href="/plugins/fancybox/fancybox.min.css" type="text/css" rel="stylesheet">

    <!-- custom style -->
    <link href="/css/ui.css" rel="stylesheet" type="text/css"/>
    <link href="/css/responsive.css" rel="stylesheet" media="only screen and (max-width: 1200px)" />

    <!-- custom javascript -->
    <script src="/js/script.js" type="text/javascript"></script>

    <script type="text/javascript">
        /// some script

        // jquery ready start
        $(document).ready(function() {
            // jQuery code

        });
        // jquery end
    </script>

</head>
<body>

<!--<form action="/HTML/userInfo" method="post" name="form1" >-->
    <!--<button href="javascript:form1.submit();" name="savesubmit" id="savesubmit" th:class="btn_save"-->
            <!--style="width: 100%" th:text="${account}"></button>-->
<!--</form>-->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <form action="/HTML/userInfo" method="post" name="showUserInfoForm" >
    <a class="navbar-brand" href="javascript:history.go(-1)" name="savesubmit" id="savesubmit"> <img class="logo" src="/images/logo-white.png" th:text="'  '+'主页'"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    </form>

    <!--<form action="/HTML/lookOrderList" method="post" name="account" th:value="${account}">-->
        <!--<button type="submit">查看订单列表</button>-->
    <!--</form>-->

    <div class="collapse navbar-collapse" id="navbar1">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="btn ml-2 btn-outline-danger" href="/HTML/relogin">退出登录<span class="sr-only">(current)</span></a>
            </li>
            <form action="/HTML/lookOrderList" method="post" name="showUserOrderForm" th:value="${account}">
            <li class="nav-item active">
                <a class="btn ml-2 btn-outline-primary" href="javascript:showUserOrderForm.submit();">我的订单<span class="sr-only">(current)</span></a>
            </li>
            </form>
            <!--<li class="nav-item"><a class="nav-link" href="html-components.html"> Documentation </a></li>-->
            <!--<li class="nav-item dropdown">-->
                <!--<a class="nav-link  dropdown-toggle" href="#" data-toggle="dropdown">  Dropdown  </a>-->
                <!--<ul class="dropdown-menu">-->
                    <!--<li><a class="dropdown-item" href="#"> Menu item 1</a></li>-->
                    <!--<li><a class="dropdown-item" href="#"> Menu item 2 </a></li>-->
                <!--</ul>-->
            <!--</li>-->
            <li class="nav-item">
                <a class="btn ml-2 btn-outline-warning" href="javascript:showUserInfoForm.submit();">个人资料</a></li>
        </ul>
    </div>
</nav>

<!-- ========================= SECTION INTRO ========================= -->
<section class="section-intro bg-secondary text-white text-center">
    <div class="container d-flex flex-column"  style="min-height:70vh;">
        <div class="row mt-auto">
            <div class="col-lg-8 col-sm-12 text-center mx-auto">
                <h1 class="display-4 mb-3">—— 速订 —— </h1>
                <p class="lead mb-5">我们是个酒店辅助订购系统，专为您快速订购酒店，便捷出行</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-9 col-md-8 col-sm-12 mx-auto text-center">
                <form class="form-noborder" method="post"  id="searchByOption" action="/HTML/searchByKeyword">
                    <div class="form-row mb-5">
                        <div class="col-lg-6 col-sm-12 form-group">
                            <input class="form-control form-control-lg" placeholder="请输入您要查询的关键字" type="text" name="keyword" id="searchHit">
                        </div>
                        <div class="col-lg-3 col-sm-12 form-group">
                            <select class="custom-select form-control-lg" id="selectSearch" name="selectSearch" onchange="seleceSearchWay()">
                                <option id="keywordOption" name="keywordOption" value="option1"> 关键词搜索 </option>
                                <option id="locationOption" name="locationOption" value="option2"> 附近搜索 </option>
                                <option id="landmarkOption" name="landmarkOption" value="option3"> 景点地标搜索 </option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-sm-12 form-group">
                            <button class="btn btn-warning btn-block btn-lg" type="submit" id="basic-account">搜索</button>
                        </div>
                    </div>
                </form>
                <p class="small">若使用关键词搜索，请在搜索框中输入若干个地标、景点或酒店关键字</p>
                <p class="small">若使用附近搜索，请在搜索框中输入公里数字，将展示当前位置输入公里数内的酒店</p>
                <p class="small">若使用景点地标搜索，请在搜索框中输入注明景点或地标，将展示其附近的酒店</p>
                <!--下面的图标-->
                <ul class="list-inline my-5">
                    <li class="list-inline-item">
                        <a class="btn btn-outline-warning"  href="/HTML/conditionSearch" >不喜欢以上搜索方式？根据住房时间进行搜索</a>
                    </li>
                </ul>
            </div> <!-- col.// -->
        </div> <!-- row.// -->

    </div>
</section>
<!-- ========================= SECTION INTRO END// ========================= -->


<section class="section-content padding-y">
    <div class="container">

        <header class="section-heading">
            <h2>酒店辅助订购系统使用说明</h2>
        </header><!-- sect-heading -->

        <article>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


        </article>

    </div> <!-- container .//  -->
</section>
<!-- ========================= SECTION CONTENT END// ========================= -->

<!-- ========================= FOOTER ========================= -->
<footer class="section-footer bg-dark white">
    <div class="container">
        <section class="footer-bottom row">
            <div class="col-sm-6">
                <p> 四川大学实训项目 <br>  第六组作品</p>
            </div>
            <div class="col-sm-6">
                <p class="text-sm-right">
                    2019 · 7 · 8 <br>
                    中国 · 成都
                    <!--<a href="http://bootstrap-ecommerce.com">Bootstrap-ecommerce UI kit</a>-->
                </p>
            </div>
        </section> <!-- //footer-top -->
    </div><!-- //container -->
</footer>
<!-- ========================= FOOTER END // ========================= -->
<script type="text/javascript">
    function seleceSearchWay() {
        var searchWay=document.getElementById("selectSearch");
        var index=searchWay.selectedIndex;
        var value=searchWay.options[index].value;
        if(value=="option1"){
            document.getElementById("searchByOption").action="/HTML/searchByKeyword";
            document.getElementById("searchHit").setAttribute("placeholder","【列表显示结果】请输入您要查询的关键字");
        }
        else if(value=="option2"){
            document.getElementById("searchByOption").action="/HTML/searchByMap";
            document.getElementById("searchHit").setAttribute("placeholder","【地图显示结果】请输入搜索半径，单位默认为公里");
        }
        else if(value=="option3"){
            document.getElementById("searchByOption").action="/HTML/searchByLandmark";
            document.getElementById("searchHit").setAttribute("placeholder","【地图显示结果】请输入景点、地标关键字");
        }
    }
</script>
</body>
</html>